<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="utf-8">-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--<title>改变标题</title>-->
<!--<meta name="viewport" content="initial-scale=1, maximum-scale=1">-->
<!--<link rel="shortcut icon" href="/favicon.ico">-->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->

<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">-->
<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">-->
<!--<script src="//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710"></script><script src="http://m.sui.taobao.org/assets/js/zepto.js"></script>-->

<!--<style>-->
<!--.list-block{-->
<!--margin: 0;-->
<!--}-->
<!--.card-content-inner{-->
<!--padding: 0;-->
<!--}-->
<!--.list-block ul ul {-->
<!--padding-left: 0;-->
<!--}-->
<!--.list-block .item-content {-->
<!--padding-left: 0;-->
<!--}-->
<!--.list-block .item-title.label {-->
<!--width: 20%;-->
<!--}-->
<!--.buttons-row .button {-->
<!--border-color: #000;-->
<!--}-->
<!--.content-block {-->
<!--padding: 0;-->
<!--}-->
<!--.card-footer {-->
<!--padding: .5rem ;-->
<!--}-->
<!--.button{-->
<!--padding: 0;-->
<!--}-->
<!--.list-block textarea {-->
<!--padding: 0;-->
<!--margin-top: .4rem;-->
<!--margin-bottom: .35rem;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="page-group">-->
<!--<div class="page page-current">-->
<!--<div class="content infinite-scroll infinite-scroll-bottom native-scroll list-container" data-distance="100">-->
<!--<div class="list-block cards-list">-->
<!--<ul>-->
<!--<li class="card">-->
<!--<div class="card-header">厂家信息</div>-->
<!--<div class="card-content">-->
<!--<div class="card-content-inner">-->
<!--<ul>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-name"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">名称</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="公司名称">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-email"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">地址</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="公司地址">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-password"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">联系人</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="联系人姓名" class="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-password"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">产品类型</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="产品类型" class="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-password"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="联系方式" class="">-->
<!--</div>-->
<!--<div class="item-title label"><a class="button button-fill button-success" href="tel:000">拨号</a></div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li class="align-top">-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-comment"></i></div>-->
<!--<div class="item-inner" >-->
<!--<div class="item-input">-->
<!--<textarea placeholder="备注" ></textarea>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--<div class="card-footer">-->
<!--<div class="content-block" style="width: 100%" >-->
<!--<p><a href="#" class="button button-success"><strong>标记为优质客户</strong></a></p>-->
<!--<p class="buttons-row" style="width: 100%">-->
<!--<a href="#" class="button " style="color: #000; width: 33%;">更正信息</a>-->
<!--<a href="#" class="button " style="color: red; width: 33%;">标记为无效客户</a>-->
<!--<a href="#" class="button " style="width: 34%;"><strong>标记为有效客户</strong></a>-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li class="card">-->
<!--<div class="card-header">厂家信息</div>-->
<!--<div class="card-content">-->
<!--<div class="card-content-inner">-->
<!--<ul>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-name"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">名称</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="公司名称">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-email"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">地址</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="公司地址">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-password"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">联系人</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="联系人姓名" class="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-password"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title label">产品类型</div>-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="产品类型" class="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-password"></i></div>-->
<!--<div class="item-inner">-->
<!--<div class="item-input">-->
<!--<input type="text" placeholder="联系方式" class="">-->
<!--</div>-->
<!--<div class="item-title label"><a class="button button-fill button-success" href="tel:000">拨号</a></div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--<li class="align-top">-->
<!--<div class="item-content">-->
<!--<div class="item-media"><i class="icon icon-form-comment"></i></div>-->
<!--<div class="item-inner" >-->
<!--<div class="item-input">-->
<!--<textarea placeholder="备注" ></textarea>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--<div class="card-footer">-->
<!--<div class="content-block" style="width: 100%" >-->
<!--<p><a href="#" class="button button-success"><strong>标记为优质客户</strong></a></p>-->
<!--<p class="buttons-row" style="width: 100%">-->
<!--<a href="#" class="button " style="color: #000; width: 33%;">更正信息</a>-->
<!--<a href="#" class="button " style="color: red; width: 33%;">标记为无效客户</a>-->
<!--<a href="#" class="button " style="width: 34%;"><strong>标记为有效客户</strong></a>-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--&lt;!&ndash; 加载提示符 &ndash;&gt;-->
<!--<div class="infinite-scroll-preloader">-->
<!--<div class="preloader"></div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<!--<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>-->
<!--<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>-->
<!--<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.js' charset='utf-8'></script>-->
<!--<script>-->
<!--function setHeight(element) {-->
<!--$(element).css({'height':'auto','overflow-y':'hidden','background-color':'#f5f5f5;'}).height(element.scrollHeight);}-->
<!--$('textarea').each(function () {-->
<!--setHeight(this);-->
<!--}).on('input', function () {-->
<!--setHeight(this);-->
<!--});-->

<!--var rgbSum = 0;-->
<!--function rgb(){-->
<!--var r=Math.floor(Math.random()*255);-->
<!--var g=Math.floor(Math.random()*255);-->
<!--var b=Math.floor(Math.random()*255);-->
<!--var rgb='rgb('+r+','+g+','+b+')';-->
<!--rgbSum = r+g+b;-->
<!--return rgb;-->
<!--}-->
<!--var cardHeader= document.getElementsByClassName("card-header");-->
<!--for (i=0; i<cardHeader.length; i++){-->
<!--c = cardHeader[i];-->
<!--c.style.backgroundColor = rgb();-->
<!--if (rgbSum < 400) {-->
<!--c.style.color = "#FFF";-->
<!--}-->
<!--console.log(rgbSum)-->
<!--}-->





<!--// 加载flag-->
<!--var loading = false;-->
<!--// 最多可加载的条目-->
<!--var maxItems = 100;-->

<!--// 每次加载添加多少条目-->
<!--var itemsPerLoad = 20;-->

<!--function addItems(number, lastIndex) {-->
<!--// 生成新条目的HTML-->
<!--var html = '';-->
<!--for (var i = lastIndex + 1; i <= lastIndex + number; i++) {-->
<!--html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';-->
<!--}-->
<!--// 添加新条目-->
<!--$('.infinite-scroll-bottom').append(html);-->

<!--}-->
<!--//预先加载20条-->
<!--addItems(itemsPerLoad, 0);-->

<!--// 上次加载的序号-->

<!--var lastIndex = 20;-->

<!--$.attachInfiniteScroll($('.content'));-->
<!--// 注册'infinite'事件处理函数-->
<!--$(document).on('infinite', '.infinite-scroll-bottom',function() {-->
<!--console.log("AA");-->
<!--// 如果正在加载，则退出-->
<!--if (loading) return;-->

<!--// 设置flag-->
<!--loading = true;-->

<!--// 模拟1s的加载过程-->
<!--setTimeout(function() {-->
<!--// 重置加载flag-->
<!--loading = false;-->

<!--if (lastIndex >= maxItems) {-->
<!--// 加载完毕，则注销无限加载事件，以防不必要的加载-->
<!--$.detachInfiniteScroll($('.infinite-scroll'));-->
<!--// 删除加载提示符-->
<!--$('.infinite-scroll-preloader').remove();-->
<!--return;-->
<!--}-->

<!--// 添加新条目-->
<!--addItems(itemsPerLoad, lastIndex);-->
<!--// 更新最后加载的序号-->
<!--lastIndex = $('.list-container li').length;-->
<!--//容器发生改变,如果是js滚动，需要刷新滚动-->
<!--$.refreshScroller();-->
<!--}, 1000);-->

<!--});-->
<!--$.init();-->
<!--</script>-->



<html class="pixel-ratio-1"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!-- Google Web Fonts -->

    <link rel="stylesheet" href="http://m.sui.taobao.org/dist/css/sm.css">
    <!--<link rel="stylesheet" href="http://m.sui.taobao.org/dist/css/sm-extend.css">-->
    <!--<link rel="stylesheet" href="http://m.sui.taobao.org/assets/css/demos.css">-->

    <link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-114x114.png">
    <style>
        .list-block{
            margin: 0;
        }
        .card-content-inner{
            padding: 0;
        }
        .list-block ul ul {
            padding-left: 0;
        }
        .list-block .item-content {
            padding-left: 0;
        }
        .list-block .item-title.label {
            width: 20%;
        }
        .buttons-row .button {
            border-color: #000;
        }
        .content-block {
            padding: 0;
        }
        .card-footer {
            padding: .5rem ;
        }
        .button{
            padding: 0;
        }
        .list-block textarea {
            padding: 0;
            margin-top: .4rem;
            margin-bottom: .35rem;
        }
        textarea{
            min-height: 2.5rem;
        }
    </style>

    <script src="//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710"></script><script src="http://m.sui.taobao.org/assets/js/zepto.js"></script>
    <!--<script src="http://m.sui.taobao.org/assets/js/config.js"></script>-->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


</head>
<body>
<div class="page-group">
    <div id="page-infinite-scroll-bottom" class="page page-current">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back" href="">
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">底部无限滚动</h1>
        </header>

        <div class="content infinite-scroll native-scroll" data-distance="100" >
            <div class="list-block">
                <ul class="list-container">
                    <li style="display: none" class="card">
                        <div class="card-header">厂家信息</div>
                        <div class="card-content">
                            <div class="card-content-inner">
                                <ul>
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                                            <div class="item-inner">
                                                <div class="item-title label">名称</div>
                                                <div class="item-input">
                                                    <input type="text" placeholder="公司名称">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-email"></i></div>
                                            <div class="item-inner">
                                                <div class="item-title label">地址</div>
                                                <div class="item-input">
                                                    <input type="text" placeholder="公司地址">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-password"></i></div>
                                            <div class="item-inner">
                                                <div class="item-title label">联系人</div>
                                                <div class="item-input">
                                                    <input type="text" placeholder="联系人姓名" class="">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-password"></i></div>
                                            <div class="item-inner">
                                                <div class="item-title label">产品类型</div>
                                                <div class="item-input">
                                                    <input type="text" placeholder="产品类型" class="">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-password"></i></div>
                                            <div class="item-inner">
                                                <div class="item-input">
                                                    <input type="text" placeholder="联系方式" class="">
                                                </div>
                                                <div class="item-title label"><a class="button button-fill button-success" href="tel:000">拨号</a></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="align-top">
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                            <div class="item-inner" >
                                                <div class="item-input">
                                                    <textarea placeholder="备注" ></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="content-block" style="width: 100%" >
                                <p><a href="#" class="button button-success"><strong>标记为优质客户</strong></a></p>
                                <p class="buttons-row" style="width: 100%">
                                    <a href="#" class="button " style="color: #000; width: 33%;">更正信息</a>
                                    <a href="#" class="button " style="color: red; width: 33%;">标记为无效客户</a>
                                    <a href="#" class="button " style="width: 34%;"><strong>标记为有效客户</strong></a>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
    </div>

</div>
<script src="http://m.sui.taobao.org/dist/js/sm.js"></script>
<script src="mbl/js/data.js"></script>
